<template>
    <div class="home-container">
        <!-- 主轮播图 -->
        <div class="hero-banner">
            <el-carousel class="carousel" height="460px" indicator-position="outside" arrow="always" :interval="5000">
                <el-carousel-item v-for="(item, index) in tableData" :key="index">
                    <div class="carousel-content" @click="toDetail(item.id, item.image)">
                        <div class="carousel-overlay"></div>
                        <el-image :src="item.image" alt="" class="carousel-img" />
                        <div class="carousel-caption">
                            <h2>{{ item.title || '社区活动' }}</h2>
                            <p>{{ item.description || '点击查看详情' }}</p>
                        </div>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </div>

        <div class="content-section">
            <!-- 最新资讯 -->
            <div class="news-section">
                <el-card class="news-card" shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <h3>最新资讯</h3>
                            <el-button type="primary" text @click="toNewsList" class="more-btn">
                                查看更多 <el-icon><ArrowRight /></el-icon>
                            </el-button>
                        </div>
                    </template>
                    <div class="news-list">
                        <div v-for="(news, index) in newsList" :key="index" class="news-item" @click="toNewsDetail(news.id)">
                            <el-image v-if="news.coverImage" :src="news.coverImage" class="news-image" />
                            <div class="news-content">
                                <h4 class="news-title">{{ news.title }}</h4>
                                <div class="news-info">
                                    <span class="news-date"><el-icon><Calendar /></el-icon> {{ formatDate(news.publishTime) }}</span>
                                    <span class="news-author" v-if="news.author"><el-icon><User /></el-icon> {{ news.author }}</span>
                                    <span class="news-views"><el-icon><View /></el-icon> {{ news.viewCount }}</span>
                                </div>
                            </div>
                        </div>
                        <el-empty v-if="newsList.length === 0" description="暂无新闻" />
                    </div>
                </el-card>
            </div>

            <!-- 活动通知 -->
            <div class="activity-section">
                <el-card class="activity-card" shadow="hover">
                    <template #header>
                        <div class="card-header">
                            <h3>活动通知</h3>
                            <el-button type="primary" text @click="toActivityList" class="more-btn">
                                查看更多 <el-icon><ArrowRight /></el-icon>
                            </el-button>
                        </div>
                    </template>
                    <div class="activity-content">
                        <div class="activity-preview">
                            <img src="https://img.zcool.cn/community/01a9a75dfefa5ca801209e1f2f81fb.jpg" alt="活动预览" class="activity-preview-img" />
                            <div class="activity-preview-info">
                                <h4>社区文化节活动</h4>
                                <p>丰富社区文化生活，增进邻里感情，展现老年人积极向上的精神面貌。</p>
                                <el-button type="primary" size="small" @click="toActivityDetail">查看详情</el-button>
                            </div>
                        </div>
                        
                        <div class="activity-items">
                            <div class="activity-item">
                                <div class="activity-item-date">
                                    <span class="month">6月</span>
                                    <span class="day">15</span>
                                </div>
                                <div class="activity-item-content">
                                    <h5>健康知识讲座</h5>
                                    <p>社区活动中心 14:00-16:00</p>
                                </div>
                            </div>
                            <div class="activity-item">
                                <div class="activity-item-date">
                                    <span class="month">6月</span>
                                    <span class="day">20</span>
                                </div>
                                <div class="activity-item-content">
                                    <h5>太极拳交流活动</h5>
                                    <p>社区公园 08:00-09:30</p>
                                </div>
                            </div>
                            <div class="activity-item">
                                <div class="activity-item-date">
                                    <span class="month">6月</span>
                                    <span class="day">25</span>
                                </div>
                                <div class="activity-item-content">
                                    <h5>智能手机使用培训</h5>
                                    <p>社区活动中心 09:30-11:30</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-card>
            </div>
        </div>

        <!-- 服务展示 -->
        <div class="services-section">
            <h3 class="section-title">社区服务</h3>
            <div class="services-grid">
                <div class="service-card" @click="navigateToService('health')">
                    <el-icon class="service-icon"><FirstAidKit /></el-icon>
                    <h4>健康服务</h4>
                    <p>提供健康检查、疾病预防、保健咨询等服务</p>
                </div>
                <div class="service-card" @click="navigateToService('care')">
                    <el-icon class="service-icon"><Service /></el-icon>
                    <h4>日常照料</h4>
                    <p>提供家政服务、助餐服务、陪护服务等</p>
                </div>
                <div class="service-card" @click="navigateToService('recreation')">
                    <el-icon class="service-icon"><Football /></el-icon>
                    <h4>文化娱乐</h4>
                    <p>组织文化活动、娱乐活动、体育活动等</p>
                </div>
                <div class="service-card" @click="navigateToService('dining')">
                    <el-icon class="service-icon"><Food /></el-icon>
                    <h4>餐饮服务</h4>
                    <p>提供营养配餐、送餐服务、特殊膳食等</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { storeToRefs } from "pinia"
import { useActivityStore } from "../../../stores/activity.js"
import { ref, onMounted } from 'vue'
import axios from '../../../utils/axios'
import { ArrowRight, Calendar, User, View, FirstAidKit, Service, Football, Food } from '@element-plus/icons-vue'

const activityStore = useActivityStore()
const { tableData } = storeToRefs(activityStore)
const newsList = ref([])

activityStore.initNotBegin()

const router = useRouter()
const toDetail = (id, image) => {
    activityStore.activityDetail.id = id;
    activityStore.activityDetail.image = image;
    router.push({
        path: '/front/activity/ActivityDetailView',
        query: {
            Id: id,
        }
    });
}

// 获取新闻列表
const getNewsList = async () => {
    try {
        const res = await axios.get('/news/list', {
            params: {
                pageNum: 1,
                pageSize: 5
            }
        })
        if (res.data.code === 200) {
            newsList.value = res.data.result.records || []
        }
    } catch (error) {
        console.error('获取新闻列表失败', error)
    }
}

// 格式化日期
const formatDate = (date) => {
    if (!date) return ''
    const d = new Date(date)
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
}

// 跳转到新闻详情
const toNewsDetail = (id) => {
    router.push(`/front/news/detail/${id}`)
}

// 跳转到新闻列表
const toNewsList = () => {
    router.push('/front/news/NewsListView')
}

// 跳转到活动列表
const toActivityList = () => {
    router.push('/front/activity/FrontActivityView')
}

// 跳转到活动详情
const toActivityDetail = () => {
    router.push('/front/activity/ActivityDetailView')
}

// 导航到服务页面
const navigateToService = (type) => {
    if (type === 'dining') {
        router.push('/front/dining/FrontDiningView')
    } else {
        router.push('/front/service/FrontServiceView')
    }
}

onMounted(() => {
    getNewsList()
})
</script>

<style scoped>
.home-container {
    width: 100%;
}

/* 轮播图样式 */
.hero-banner {
    margin-bottom: 30px;
}

.carousel {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.carousel-content {
    position: relative;
    height: 100%;
    cursor: pointer;
}

.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);
    z-index: 1;
}

.carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.carousel-caption {
    position: absolute;
    bottom: 60px;
    left: 60px;
    z-index: 2;
    color: #fff;
    text-align: left;
    max-width: 60%;
}

.carousel-caption h2 {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 12px;
    text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.4);
}

.carousel-caption p {
    font-size: 18px;
    font-weight: 300;
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.4);
}

/* 内容区域 */
.content-section {
    display: flex;
    gap: 30px;
    margin-bottom: 40px;
}

.news-section {
    flex: 6;
}

.activity-section {
    flex: 4;
}

/* 卡片公共样式 */
.news-card, .activity-card {
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.news-card:hover, .activity-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.more-btn {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 新闻列表样式 */
.news-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.news-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 12px;
    border-radius: 8px;
    transition: background-color 0.3s;
    cursor: pointer;
}

.news-item:hover {
    background-color: #f5f7fa;
}

.news-item:not(:last-child) {
    border-bottom: 1px solid #ebeef5;
}

.news-image {
    width: 100px;
    height: 70px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
}

.news-content {
    flex: 1;
}

.news-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 500;
    color: #303133;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.news-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: #909399;
}

.news-info span {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 活动样式 */
.activity-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.activity-preview {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    height: 180px;
}

.activity-preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.activity-preview-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    color: white;
}

.activity-preview-info h4 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 600;
}

.activity-preview-info p {
    margin: 0 0 10px;
    font-size: 14px;
    opacity: 0.9;
}

.activity-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-item {
    display: flex;
    gap: 15px;
    padding: 10px;
    border-radius: 8px;
    background-color: #f9fafc;
    transition: transform 0.2s;
}

.activity-item:hover {
    transform: translateX(5px);
}

.activity-item-date {
    width: 50px;
    text-align: center;
    border-radius: 6px;
    overflow: hidden;
    background-color: #409EFF;
    color: white;
    display: flex;
    flex-direction: column;
}

.activity-item-date .month {
    font-size: 12px;
    padding: 2px 0;
    background-color: rgba(0,0,0,0.2);
}

.activity-item-date .day {
    font-size: 20px;
    font-weight: bold;
    padding: 4px 0;
}

.activity-item-content {
    flex: 1;
}

.activity-item-content h5 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 500;
}

.activity-item-content p {
    margin: 0;
    font-size: 13px;
    color: #909399;
}

/* 服务区域 */
.services-section {
    padding: 20px 0;
}

.section-title {
    text-align: center;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    position: relative;
}

.section-title:after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: #409EFF;
    margin: 12px auto 0;
    border-radius: 2px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.service-card {
    background-color: #fff;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
    transition: all 0.3s;
    cursor: pointer;
    border: 1px solid #ebeef5;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.1);
    border-color: #d0e1fd;
}

.service-icon {
    font-size: 36px;
    color: #409EFF;
    margin-bottom: 16px;
}

.service-card h4 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 10px;
}

.service-card p {
    font-size: 14px;
    color: #606266;
    margin: 0;
    line-height: 1.5;
}

/* 响应式设计 */
@media (max-width: 1200px) {
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .content-section {
        flex-direction: column;
    }
    
    .carousel-caption {
        bottom: 30px;
        left: 30px;
        max-width: 80%;
    }
    
    .carousel-caption h2 {
        font-size: 24px;
    }
    
    .carousel-caption p {
        font-size: 16px;
    }
    
    .services-grid {
        grid-template-columns: 1fr;
    }
}
</style>